<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dataset 的使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
  </head>
  <body>
    <div id="main1" style="width: 600px; height: 400px;"></div>
    <div id="main2" style="width: 600px; height: 400px;"></div>
  </body>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById("main1"));
    var myChart2 = echarts.init(document.getElementById("main2"));

    // 指定图表的配置项和数据
    option1 = {
      legend: {},
      tooltip: {},
      // 原始数据。一般来说，原始数据表达的是二维表。可以用如下这些格式表达二维表：
      // 二维数组，其中第一行/列可以给出 维度名，也可以不给出，直接就是数据：
      dataset: {
        source: [
          ["product", "2015", "2016", "2017"],
          ["Matcha Latte", 43.3, 85.8, 93.7],
          ["Milk Tea", 83.1, 73.4, 55.1],
          ["Cheese Cocoa", 86.4, 65.2, 82.5],
          ["Walnut Brownie", 72.4, 53.9, 39.1],
        ],
      },
      xAxis: { type: "category" },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
    };

    option2 = {
      legend: {},
      tooltip: {},
      // 按行的 key-value 形式（对象数组），其中键（key）表明了 维度名：
      dataset: {
        source: [
          { product: "Matcha Latte", count: 823, score: 95.8 },
          { product: "Milk Tea", count: 235, score: 81.4 },
          { product: "Cheese Cocoa", count: 1042, score: 91.2 },
          { product: "Walnut Brownie", count: 988, score: 76.9 },
        ],
      },
      xAxis: { type: "category" },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: "bar" }, { type: "bar" }],
    };
    myChart1.setOption(option1);
    myChart2.setOption(option2);
  </script>
</html>
